<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button
          class="icon-button back-button"
          style="margin-right: 10px"
          @click="$router.push({
            name: 'daasIndex',
              query: {
              table_page: $route.query.index_table_page
            },
                params: {
                  isBack: true
                }
          })"
        >
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span style="display:flex">
          <link-button
            :content="$t('route.daasIndex')"
            @click="
              $router.push({
                name: 'daasIndex',
                query: {
                  table_page: $route.query.index_table_page
                },
                params: {
                  isBack: true
                }
              })
            "
          />&nbsp;/&nbsp;<span>{{ $t('order.orderInstance.resourceInstanceID') + ": " + orderData.order_id }}</span>
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            v-loading="loading"
            ref="Daas"
            :pageMethod="
              (params) => {
                params.requestUUID = orderData.requestUUID
                return $orsApi.getOrderMessage(params);
              }
            "
          >
            <!-- <template #table-options="tableSlotData">
              <div class="table-left-options">
              </div>
              <div class="table-right-options">
                <el-input
                  :placeholder="$t('order.searchMessageId')"
                  v-model="searchValue"
                  @keyup.enter.native="tableSearchChange(tableSlotData)"
                  style="width: 200px"
                >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template> -->
            <template #table-column="tableSlotData">
              <el-table-column
                type="selection"
                width="40"
                align="center"
              ></el-table-column>
              <!-- 消息请求ID -->
              <el-table-column
                prop="requestUUID"
                :label="$t('order.requestId')"
              >
              </el-table-column>

              <!-- 发送方 -->
              <el-table-column
                prop="sender"
                :label="$t('order.sender')"
              >
              </el-table-column>
              <!-- 接收方 -->
              <el-table-column
                prop="receiver"
                :label="$t('order.receiver')"
              >
              </el-table-column>
              <!-- 操作类型 -->
              <el-table-column
                prop="action"
                :label="$t('order.operationType')"
                :formatter="
                  (row, column) => {
                    if (row.step) {
                        return $t(`order.orderStep.${row.step}`);
                      }
                      return '';  
                  }
                "
              >
              </el-table-column>
              <!-- 消息内容 -->
              <el-table-column
                prop="messageBody"
                :label="$t('order.messageContent')"
              >
              <template #default = "props">
                <el-link slot="reference" :underline="false" type="primary" @click="initData(props.row.messageBody)">{{$t('common.details')}}</el-link>
                <!-- <el-popover
                  placement="right"
                  width="400"
                  trigger="hover">
                  <el-form label-position="right" class="detail-text">
                    <el-form-item :label="v" v-for="(k,v) in initData(props.row.messageBody)" :key="v">
                      {{ k }}
                    </el-form-item>
                  </el-form>
                  <el-link slot="reference" :underline="false" type="primary" @click="initData(props.row.messageBody)">{{$t('common.details')}}</el-link>
                </el-popover> -->
              </template>
              </el-table-column>
              <!-- 收发时间 -->
              <el-table-column
                prop="createdAt"
                :label="$t('order.sendAndReceiveTime')"
              >
              <template #default="props">
                  <span>{{ parseTime(new Date(props.row.createdAt)) }}</span>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- <desktop-pool-operation-form-dialog
                @success="refreshDesktopPool"
                ref="operation"
              />
              <desktop-pool-select-form-dialog
                @success="refreshDesktopPool"
                ref="distribution"
              />
              <desktop-pool-policy-form-dialog
                @success="refreshDesktopPool"
                ref="policy"
              />
              <desktop-pool-send-message-form-dialog
                @success="refreshDesktopPool"
                ref="send"
              /> -->
              <message-detail ref="MessageDetail"></message-detail>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import BasicTable from "../../../../components/Basic/Table/BasicTable.vue";
import LinkButton from "../../../../components/Basic/Button/LinkButton.vue";
import { AuthModule } from "../../../../store/modules/auth";
import { parseTime, loginTimeslotToString } from '../../../../utils';
import MessageDetail from '../../components/messageDetail.vue';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    MessageDetail
  },
  computed: {
    parseTime: () => parseTime,
    loginTimeslotToString: () => loginTimeslotToString
  },
  data() {
    return {
      loading: false,
      poolData: {},
      currentDetail: "Horizon",
      horizonSearchValue: "",
      daasSearchValue: "",
      // searchValue: "",
      userList: [],
      authrole: AuthModule.authrole,
      tableSearch: false
    };
  },
  async created() {
    this.orderData = {
      order_id: (this as any).$route.query.order_id,
      requestUUID: (this as any).$route.query.requestUUID
    };
  },
  methods: {
    initData(data: any) {
      let res = JSON.parse(data);
      (this as any).$refs.MessageDetail.init(res);
      // let result: any = {};
      // for(let i in res){
      //   // let res2: any = {};
      //   // if(Array.isArray(res[i])) {
      //   //   for(let j=0;j<res[i].length;j++) {
      //   //     res2 = this.initData(JSON.stringify(res[i][j]));
      //   //   }
      //   // }else {
      //   //   (result as any)[i] = res[i];
      //   // }
      //   // if(JSON.stringify(res2) != '{}') {
      //   //   for(let j in res2) {
      //   //     (result as any)[j] = res2[j];
      //   //   }
      //   // }
      //   console.log(i, res[i]);
      //   // result[i] = res[i];
      // }
      // console.log("+++++++++++++++++++++")
      // return result;
    },
    // 页面刷新重置page
    // tableSearchChange(table: any) {
    //   (this as any).tableSearch = true;
    //   table.table.refresh(true);
    // },
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px;
        }

        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

// .table-left-options {
//   display: flex;
// }

// .table-right-options {
//   display: flex;

//   .setting-button {
//     margin-right: 10px;
//   }
// }
.detail-text {
  max-height: calc(100vh - 250px);
  overflow-x: hidden;
  flex-grow: 1;
  overflow-y: scroll;
}
</style>
